<template>
	<view class="record-layer">
		<view class="record-box">
			<view class="record-btn-layer">
				<button class="record-btn" :class="longPress == '1' ? 'record-btn-1' : 'record-btn-2'"
					@longpress="longpressBtn()" @touchend="touchendBtn()">
					<!-- <u-icon name="mic" color="#666" size="18"></u-icon> -->

					<!-- <text>{{longPress == '1' ? '按住说话' : '说话中...'}}</text> -->
				</button>
				<image :src="queryIconImage(`anserpopular2`)" class="eam-dmt-icon" mode=""></image>
			</view>
			<!-- 语音音阶动画 -->
			<view class="prompt-layer prompt-layer-1" v-if="longPress == '2'">
				<view class="prompt-loader">
					<view class="em" v-for="(item,index) in 15" :key="index"></view>
				</view>
				<text class="p">{{'剩余：' + count + 's'}}</text>
				<text class="span">松手结束录音</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	let recorderManager = uni.getRecorderManager()
	let init // 录制时长计时器
	let timer // 播放 录制倒计时
	export default {
		props: {
			audioList: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		data() {
			return {
				num: 0,
				count: null, // 录制倒计时
				longPress: '1', // 1显示 按住说话 2显示 说话中
				delShow: false, // 删除提示框显示隐藏
				time: 0, //录音时长
				duration: 60000, //录音最大值ms 60000/1分钟
				tempFilePath: '', //音频路径
				playStatus: 0, //录音播放状态 0:未播放 1:正在播放
				antiShake: false, //播放时禁止重复点击
			}
		},
		computed: {
			...mapState({
				iconList: state => state.remote?.iconList?.data_list ?? [],
			})
		},
		mounted() {
			let self = this;
			recorderManager.onStop(function(res) {
				console.log('recorder stop' + JSON.stringify(res));
				self.voicePath = res.tempFilePath;
			});
			this.resetAudio()
		},

		methods: {
			queryIconImage(label, key = "iconList") {
				return this[key]?.find(res => res?.label == label)?.img?.url;
			},
			// 倒计时
			countdown(val) {
				this.count = Number(val);
				timer = setInterval(() => {
					if (this.count > 0) {
						this.count--
					} else {
						this.longPress = '1';
						this.resetAudio()
					}
				}, 1000);
			},
			// 重置
			resetAudio() {
				clearInterval(timer);
				clearInterval(init)
				this.delShow = false;
				this.playStatus = 0;
				this.antiShake = false
			},
			// 长按录音事件
			longpressBtn() {
				this.longPress = '2';
				this.countdown(60); // 倒计时
				clearInterval(init) // 清除定时器
				recorderManager.onStop((res) => {
					this.tempFilePath = res.tempFilePath;
					this.recordingTimer(this.time);
				})
				let options = {
					duration: this.duration, // 指定录音的时长，单位 ms
					sampleRate: 16000, // 采样率
					numberOfChannels: 1, // 录音通道数
					encodeBitRate: 96000, // 编码码率
					format: 'mp3', // 音频格式，有效值 aac/mp3
					frameSize: 10, // 指定帧大小，单位 KB
				}
				this.recordingTimer();
				recorderManager.start(options);
				// 监听音频开始事件
				recorderManager.onStart((res) => {
					console.log('录音开始-->', res)
				})
			},
			// 长按松开录音事件
			touchendBtn() {
				this.longPress = '1';
				this.num = 60 - this.count
				recorderManager.onStop((res) => {
					this.tempFilePath = res.tempFilePath
					this.returnAudio()
					this.resetAudio()
				})
				this.recordingTimer(this.time)
				recorderManager.stop()
			},
			// 返回音频数据
			returnAudio() {
				let arr = []
				let objct = {
					data: this.tempFilePath,
					datatwo: this.num
				}
				console.log("录制时长,,,", objct);
				// let token = uni.getStorageSync('AccessToken')
				this.$emit('returnAudio', objct)
				// uni.uploadFile({
				// 	url: this.$utils.staticUrl + '/api/files/create',
				// 	filePath: this.tempFilePath,
				// 	name: 'file',
				// 	formData: {
				// 		is_public: 1
				// 	},
				// 	header: {
				// 		//请求头参数,token之类的  
				// 		Authorization: token,
				// 		// 'Content-Type': 'multipart/form-data'
				// 	},
				// 	success: (res) => {
				// 		let data = JSON.parse(res.data);
				// 		console.log('上传录音', data)
				// 		let {
				// 			image_url,
				// 			attachment_id,
				// 			full_name,
				// 			image_save_url,
				// 			size,
				// 		} = data.data

				// 		let index = this.audioList.length < 1 ? 1 : this.audioList.length + 1
				// 		this.audioList.forEach(item => {
				// 			let name = item.full_name || item.name
				// 			if (name.includes('Recorder_')) {
				// 				index = Number(name.substr(-3)) + 1
				// 			}
				// 		})

				// 		index = index < 10 ? '00' + index : '0' + index //只考虑100以内
				// 		arr.push({
				// 			image_url,
				// 			attachment_id,
				// 			full_name: `Recorder_${index}`,
				// 			image_save_url,
				// 			size,
				// 			duration: this.time
				// 		})

				// 		// 兼容安卓
				// 		// let phone = uni.getSystemInfoSync();
				// 		// if (phone.platform === 'android') {
				// 		// 	arr.push({
				// 		// 		image_url,
				// 		// 		attachment_id,
				// 		// 		full_name: `Recorder_${index}`,
				// 		// 		image_save_url,
				// 		// 		size
				// 		// 	})
				// 		// } else {
				// 		// 	arr.push({
				// 		// 		image_url,
				// 		// 		attachment_id,
				// 		// 		full_name,
				// 		// 		image_save_url,
				// 		// 		size
				// 		// 	})
				// 		// }

				// 		this.$emit('returnAudio', arr)
				// 	}
				// })
			},
			recordingTimer(time) {
				if (time == undefined) {
					// 将计时器赋值给init
					init = setInterval(() => {
						this.time++
					}, 1000);
				} else {
					clearInterval(init)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	/* 语音录制开始--------------------------------------------------------------------- */
	.record-layer {
		width: 100%;
		box-sizing: border-box;
	}

	.record-box {
		width: 100%;
		position: relative;
	}

	.record-btn-layer {
		width: 80rpx;
		height: 80rpx;
		position: relative;

		.record-btn {
			width: 80rpx;
			height: 80rpx;
			position: absolute;
			opacity: 0;


		}

		.eam-dmt-icon {
			width: 80rpx;
			height: 80rpx;
		}

	}

	.record-btn-layer button::after {
		border: none;
	}

	.record-btn-layer button {
		margin-top: 16rpx;
		// margin-left: 26rpx;
		height: 64rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fafafa;

		text {
			color: #666;
			font-size: 24rpx;
			margin-left: 4rpx;
		}
	}

	.record-btn-layer .record-btn-2 {
		background: rgba(255, 211, 0, 0.2);
	}

	/* 提示小弹窗 */
	.prompt-layer {
		border-radius: 16rpx;
		background: #FFD300;
		padding: 16rpx 32rpx;
		box-sizing: border-box;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		z-index: 99;
	}

	.prompt-layer::after {
		content: '';
		display: block;
		border: 12rpx solid rgba(0, 0, 0, 0);
		border-top-color: rgba(255, 211, 0, 1);
		position: absolute;
		bottom: -20rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.prompt-layer-1 {
		font-size: 24rpx;
		width: 256rpx;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		top: -160rpx;
	}

	.prompt-layer-1 .p {
		color: #000000;
	}

	.prompt-layer-1 .span {
		color: rgba(0, 0, 0, .6);
	}

	/* 语音音阶------------- */
	.prompt-loader {
		width: 192rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 12rpx;
	}

	.prompt-loader .em {
		display: block;
		background: #333333;
		width: 2rpx;
		height: 10%;
		margin-right: 5rpx;
		float: left;
	}

	.prompt-loader .em:last-child {
		margin-right: 0;
	}

	.prompt-loader .em:nth-child(1) {
		animation: load 2.5s 1.4s infinite linear;
	}

	.prompt-loader .em:nth-child(2) {
		animation: load 2.5s 1.2s infinite linear;
	}

	.prompt-loader .em:nth-child(3) {
		animation: load 2.5s 1s infinite linear;
	}

	.prompt-loader .em:nth-child(4) {
		animation: load 2.5s 0.8s infinite linear;
	}

	.prompt-loader .em:nth-child(5) {
		animation: load 2.5s 0.6s infinite linear;
	}

	.prompt-loader .em:nth-child(6) {
		animation: load 2.5s 0.4s infinite linear;
	}

	.prompt-loader .em:nth-child(7) {
		animation: load 2.5s 0.2s infinite linear;
	}

	.prompt-loader .em:nth-child(8) {
		animation: load 2.5s 0s infinite linear;
	}

	.prompt-loader .em:nth-child(9) {
		animation: load 2.5s 0.2s infinite linear;
	}

	.prompt-loader .em:nth-child(10) {
		animation: load 2.5s 0.4s infinite linear;
	}

	.prompt-loader .em:nth-child(11) {
		animation: load 2.5s 0.6s infinite linear;
	}

	.prompt-loader .em:nth-child(12) {
		animation: load 2.5s 0.8s infinite linear;
	}

	.prompt-loader .em:nth-child(13) {
		animation: load 2.5s 1s infinite linear;
	}

	.prompt-loader .em:nth-child(14) {
		animation: load 2.5s 1.2s infinite linear;
	}

	.prompt-loader .em:nth-child(15) {
		animation: load 2.5s 1.4s infinite linear;
	}

	@keyframes load {
		0% {
			height: 10%;
		}

		50% {
			height: 100%;
		}

		100% {
			height: 10%;
		}
	}

	/* 语音音阶-------------------- */
	.prompt-layer-2 {
		top: -50rpx;
	}

	.prompt-layer-2 .text {
		color: rgba(0, 0, 0, 1);
		font-size: 24rpx;
	}

	/* 语音录制结束---------------------------------------------------------------- */
</style>